import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterdemo/utils/toast_util.dart';
import 'package:flutterdemo/widgets/views/underline_radio.dart';

class CheckWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new CheckState();
  }
}

class CheckState extends State<CheckWidget> {
  bool _switchSelected = true; //维护单选开关状态
  bool _checkboxSelected = true; //维护复选框状态
  String groupValue;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("单选和复选框"),
      ),
      body: new Column(
        textDirection: TextDirection.ltr,
        children: <Widget>[
          new Row(
            children: <Widget>[
              Switch(
                  value: _switchSelected,
                  activeColor: Colors.red,
                  onChanged: (check) {
                    setState(() {
                      _switchSelected = check;
                    });
                  }),
              Text("data"),
              Checkbox(
                  value: _checkboxSelected,
                  activeColor: Colors.red,
                  onChanged: (check) {
                    setState(() {
                      _checkboxSelected = check;
                    });
                  }),
            ],
          ),
          Row(
            children: <Widget>[
              Radio(
                  value: "Android",
                  groupValue: this.groupValue,
                  onChanged: (selectValue) {
                    setState(() {
                      this.groupValue = selectValue;
                      ToastUtil.showToastCenter("选择了$groupValue");
                    });
                  }),
              Text("Android"),
              Radio(
                  value: "IOS",
                  groupValue: this.groupValue,
                  onChanged: (selectValue) {
                    setState(() {
                      this.groupValue = selectValue;
                      ToastUtil.showToastCenter("选择了$groupValue");
                    });
                  }),
              Text("IOS"),
              Radio(
                  value: "Web",
                  groupValue: this.groupValue,
                  onChanged: (selectValue) {
                    setState(() {
                      this.groupValue = selectValue;
                      toast();
                    });
                  }),
              Text("Web"),
            ],
          ),
          new Container(
            color: Colors.black12,
            child: Column(
              children: <Widget>[
                RadioListTile(
                  value: "张三",
                  groupValue: this.groupValue,
                  onChanged: (selectValue) {
                    setState(() {
                      this.groupValue = selectValue;
                      toast();
                    });
                  },
                  title: Text("张三"),
                  subtitle: Text("18011112222"),
                  selected: this.groupValue == "张三",
                ),
                RadioListTile(
                  value: "李四",
                  groupValue: this.groupValue,
                  onChanged: (selectValue) {
                    setState(() {
                      this.groupValue = selectValue;
                      toast();
                    });
                  },
                  title: Text("李四"),
                  subtitle: Text("18011112223"),
                  selected: this.groupValue == "李四",
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            color: Colors.yellow[100],
            height: 50,
            child: UnderlineRadioGroup(
              titles: titles,
              selects: selects,
              onTap: (index) {
                setState(() {
                  selects = [false, false, false];
                  selects[index] = true;
                  ToastUtil.showToastCenter('$index');
                });
              },
            ),
          ),
          Container(
            padding: EdgeInsets.all(10),
            color: Colors.greenAccent[100],
            child: Row(
              children: <Widget>[
                buildItem(0, onTap: () {
                  setState(() {
                    selects = [true, false, false];
                    ToastUtil.showToastCenter(titles[0]);
                  });
                }),
                buildItem(1, onTap: () {
                  setState(() {
                    selects = [false, true, false];
                  });
                }),
                buildItem(2, onTap: () {
                  setState(() {
                    selects = [false, false, true];
                  });
                }),
              ],
            ),
          ),
        ],
      ),
    );
  }

  static List<String> titles = ['大王', '将军', '士大夫'];
  static List<bool> selects = [true, false, false];

  void toast() {
    ToastUtil.showToastCenter("选择了$groupValue");
  }

  Widget buildItem(int index, {GestureTapCallback onTap}) {
    return GestureDetector(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Text(
                titles[index],
                style: TextStyle(
                  fontSize: 17,
                  color: (selects[index] ? Colors.blue : Colors.black38),
                ),
              ),
              Icon(
                Icons.navigate_next,
              ),
            ],
          ),
          Container(
            color: selects[index] ? Colors.blue : Colors.transparent,
            width: titles[index].length * 17.0,
            height: 1.5,
          ),
        ],
      ),
      onTap: onTap,
    );
  }
}
